<template>
<div class="search">
    
    <div class="top">
        <!-- 搜索框功能实现 -->
    <van-search
        v-model="keyword"
        show-action
        placeholder="520红包抢先领"
        @search="onSearch"
        @cancel="onCancel"
    />
    <!-- 下拉菜单 -->
    <Dropmenu :filterCategory='filterCategory' @transfer='changePriceFn' @transfer1='changeKindFn'></Dropmenu>
    </div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="new">
    <!-- 商品列表 -->
    <Goodslist :goodsList='goodsList' ></Goodslist>
    </van-pull-refresh>
    <!-- 加载 -->
    <!-- <van-loading class="bottom" size="24px">加载中...</van-loading> -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已全部加载完毕" >

    </van-list>
</div>
</template>

<script>
import { Toast } from 'vant';
import Dropmenu from '@/components/Dropmenu'
import { searchgoods } from "@/utils/http";
import Goodslist from '@/components/Goodslist'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Search',
data() {
return {
    isLoading: false,
    keyword: "", // 搜索字
    page:1, // 显示页数
    size: 40, // 显示一页几个
    order: "desc", // 排序 desc由高到低 ， asc由低到高
    categoryId: 0, // 下拉菜单中分类选项 0代表全部
    sort: "id", // 排序方式，根据分类d还是价格排序
    goodsList:[],// 商品数据
    filterCategory:[],//分类数据
    //
    list: [],
    loading: false,
    finished: true,
}
},
props:[''],
components: {
    Dropmenu,
    Goodslist,
},
methods: {
    getData(){
      const params = {
      keyword: this.keyword, // 搜索字
      page:this.page, // 显示页数
      size: this.size, // 显示一页几个
      order: this.order, // 排序 desc由高到低 ， asc由低到高
      categoryId: this.categoryId, // 下拉菜单中分类选项 0代表全部
      sort: this.sort, // 排序方式，根据分类d还是价格排序
    }
    searchgoods(params).then((res) => {
        // console.log(res);
        this.goodsList = res.data.goodsList
        this.filterCategory = res.data.filterCategory
        // console.log(this.filterCategory);
        // 这里后端返回的filterCategory跟vant组件中的数据结构不匹配，需要自己手动改，重新赋值
        // 先转化为字符串形式，在利用正则替换掉，在转化为json格式
        this.filterCategory = JSON.parse(JSON.stringify(this.filterCategory).replace(/name/g,'text').replace(/id/g,'value'))
        // console.log(JSON.parse(JSON.stringify(this.filterCategory).replace(/name/g,'text').replace(/id/g,'value')));
        // console.log(this.filterCategory);
        
      })
      .catch((e) => {});
    },
    onSearch() {
      // 点击搜索
      this.getData()
    },
    onCancel() {
      // 点击取消返回上一页
      this.$router.go(-1)
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.getData()
      }, 1000);
    },
    changePriceFn(m){
        // console.log(m);
        this.order = m
        this.sort = 'price'
        this.getData()
    },
    changeKindFn(n){
        this.categoryId = n
        this.sort = 'id'
        this.getData()
    },
    //
    
},
created() {
    this.getData()
    },
}
</script>

<style lang='less'  scoped>
.search{
    position: relative;
    .top{
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 999;
    }
    .bottom{
        margin-left: 40%;
    }

}
</style>